﻿@{
    ViewBag.Title = "Modals and Wells";
    ViewBag.Description = "modals and wells";
    Layout = "~/Views/Shared/_Default.cshtml";
}

<div class="row">
    <div class="col-lg-12 col-sm-12 col-xs-12">
        <h5 class="row-title before-darkorange"><i class="fa fa-reply-all darkorange"></i>Modal Dialoges</h5>
        <div class="row">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="well">
                    <div class="modal-preview">
                        @using (var modal = Html.Bootstrap().Begin(new Modal().Id("modalId").Closeable().Color(BootstrapColors.Primary).HtmlAttributes(new { style = "display:block !important;" })))
                        {
                            using (var header = modal.BeginHeader())
                            {
                                <h4 class="modal-title">Modal Title</h4>
                            }
                            using (modal.BeginBody())
                            {
                                <p>Modal Body</p>
                            }
                            using (modal.BeginFooter())
                            {
                                @Html.Bootstrap().Button().Color(BootstrapColors.Primary)
                            }
                        }

                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="well">
                    <div class="modal-preview">
                        @using (var modal = Html.Bootstrap().Begin(new Modal().Id("modalId").Closeable().Color(BootstrapColors.Darkorange).HtmlAttributes(new { style = "display:block !important;" })))
                        {
                            using (var header = modal.BeginHeader())
                            {
                                <h4 class="modal-title">Modal Title</h4>
                            }
                            using (modal.BeginBody())
                            {
                                <p>Modal Body</p>
                            }
                            using (modal.BeginFooter())
                            {
                                @Html.Bootstrap().Button().Color(BootstrapColors.Danger)
                            }
                        }
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="well with-header">
                    <div class="header bordered-pink">Modals in action</div>
                    <div class="buttons-preview">
                        <h5>Modal Sizes</h5>
                        <button class="btn btn-default" data-toggle="modal" data-target="#smallModal">Small modal</button>
                        <button class="btn btn-default" data-toggle="modal" data-target="#largeModal">Large modal</button>
                        <hr class="wide" />
                        <h5>Bootbox Modal</h5>
                        <button class="btn btn-palegreen" id="bootbox-regular">Bootbox Dialog</button>
                        <button class="btn btn-sky" id="bootbox-confirm">Bootbox Confirm</button>
                        <button class="btn btn-darkorange" id="bootbox-options">Bootbox Custom Form</button>
                    </div>
                </div>

            </div>
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="well with-header">
                    <div class="header bordered-blue">Message Modals</div>
                    <div class="buttons-preview">
                        <button class="btn btn-success" data-toggle="modal" data-target="#modal-success">Success</button>
                        <button class="btn btn-info" data-toggle="modal" data-target="#modal-info">Info</button>
                        <button class="btn btn-danger" data-toggle="modal" data-target="#modal-danger">Danger</button>
                        <button class="btn btn-warning" data-toggle="modal" data-target="#modal-warning">Warning</button>
                    </div>
                </div>
            </div>
        </div>

        <h5 class="row-title before-palegreen"><i class="fa fa-columns palegreen"></i>Wells</h5>
        <div class="row">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="well well-lg">
                    <h4 class="block">I am a large well</h4>
                    <p>
                        Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.
                    </p>
                </div>
                <div class="well">
                    <h4 class="block">I am a default well</h4>
                    <p>
                        Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.
                    </p>
                </div>
                <div class="well well-sm">
                    <h4 class="block">I am a small well</h4>
                    <p>
                        Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.
                    </p>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="bordered-well-container">
                    <div class="well bordered-top bordered-blue">
                        <div class="well bordered-top bordered-danger">
                            <div class="well bordered-top bordered-warning">
                                <div class="well bordered-top bordered-palegreen">
                                    <div class="well bordered-top bordered-bottom bordered-pink">
                                        <h4 class="block">Bordered Wells</h4>
                                        <p>
                                            Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.
                                        </p>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <h5 class="row-title before-maroon"><i class="fa fa-picture-o maroon"></i>Colored Wells</h5>
        <div class="row">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="well bg-magenta bordered-left bordered-yellow">
                    <h4 class="block">Colored Well</h4>
                    <p>
                        With Border on Left
                    </p>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="well bg-palegreen bordered-right bordered-success">
                    <h4 class="block">Colored Well</h4>
                    <p>
                        With Border on Right
                    </p>
                </div>
            </div>
        </div>
        <h5 class="row-title before-blueberry"><i class="typcn typcn-th-menu blueberry"></i>Wells With Header and Footer</h5>
        <div class="row">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="well with-header">
                    <div class="header bordered-magenta">Well With Header</div>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="well with-header with-footer">
                    <div class="header bordered-palegreen">Well With Header & Footer</div>
                    <div class="footer">I'm Footer</div>
                </div>
            </div>
        </div>

        <h5 class="row-title before-orange"><i class="typcn typcn-th-menu orange"></i>Attached Wells</h5>
        <div class="row">
            <div class="col-xs-12">
                <div class="well attached top">
                    Top Well
                </div>
                <div class="well attached">
                    Middle Well
                </div>
                <div class="well attached bottom">
                    Bottom Well
                </div>
            </div>
        </div>
    </div>
</div>

<!--Modal Templates-->
<!--Email Modal Templates-->
<div id="myEmailModal" style="display:none;">
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="To" required="">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Subject" required="">
            </div>
            <div class="form-group">
                <textarea class="form-control" placeholder="Content" rows="5" required=""></textarea>
            </div>
        </div>
    </div>
</div>
<!--End Email Templates-->
<!--Success Modal Templates-->
@using (var modal = Html.Bootstrap().Begin(new Modal().Id("modal-success").Fade().HtmlAttributes(new { @class = "modal-message modal-success" })))
{
    using (var header = modal.BeginHeader())
    {
        <i class="glyphicon glyphicon-check"></i>
    }
    using (var title = modal.BeginTitle())
    {
        <text>Success</text>
    }
    using (var body = modal.BeginBody())
    {
        <text>You have done great!</text>
    }
    using (var footer = modal.BeginFooter())
    {
        @Html.Bootstrap().Button().Text("Ok").Color(BootstrapColors.Success).HtmlAttributes(new { data_dismiss = "modal" })
    }
}

<!--End Success Modal Templates-->
<!--Info Modal Templates-->
@using (var modal = Html.Bootstrap().Begin(new Modal().Id("modal-info").Fade().HtmlAttributes(new { @class = "modal-message modal-info" })))
{
    using (var header = modal.BeginHeader())
    {
        <i class="fa fa-envelope"></i>
    }
    using (var title = modal.BeginTitle())
    {
        <text>Alert</text>
    }
    using (var body = modal.BeginBody())
    {
        <text>You've got mail!</text>
    }
    using (var footer = modal.BeginFooter())
    {
        @Html.Bootstrap().Button().Text("Ok").Color(BootstrapColors.Info).HtmlAttributes(new { data_dismiss = "modal" })
    }
}
<!--End Info Modal Templates-->
<!--Danger Modal Templates-->
@using (var modal = Html.Bootstrap().Begin(new Modal().Id("modal-danger").Fade().HtmlAttributes(new { @class = "modal-message modal-danger" })))
{
    using (var header = modal.BeginHeader())
    {
        <i class="glyphicon glyphicon-fire"></i>
    }
    using (var title = modal.BeginTitle())
    {
        <text>Alert</text>
    }
    using (var body = modal.BeginBody())
    {
        <text>You've done bad!</text>
    }
    using (var footer = modal.BeginFooter())
    {
        @Html.Bootstrap().Button().Text("Ok").Color(BootstrapColors.Danger).HtmlAttributes(new { data_dismiss = "modal" })
    }
}
<!--End Danger Modal Templates-->
<!--Warning Modal Templates-->
@using (var modal = Html.Bootstrap().Begin(new Modal().Id("modal-warning").Fade().HtmlAttributes(new { @class = "modal-message modal-warning" })))
{
    using (var header = modal.BeginHeader())
    {
        <i class="fa fa-warning"></i>
    }
    using (var title = modal.BeginTitle())
    {
        <text>Warning</text>
    }
    using (var body = modal.BeginBody())
    {
        <text>Is something wrong?</text>
    }
    using (var footer = modal.BeginFooter())
    {
        @Html.Bootstrap().Button().Text("Ok").Color(BootstrapColors.Warning).HtmlAttributes(new { data_dismiss = "modal" })
    }
}
<!--End Warning Modal Templates-->
<!--Large Modal Templates-->
@using (var modal = Html.Bootstrap().Begin(new Modal().Id("largeModal").Closeable().Size(BootstrapSizes.Large)))
{
    using (var header = modal.BeginHeader())
    {
        <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
    }
    using (var body = modal.BeginBody())
    {
        <text>...</text>
    }
}

<!--End Large Modal Templates-->
<!--Small Modal Templates-->
@using (var modal = Html.Bootstrap().Begin(new Modal().Id("smallModal").Closeable().Size(BootstrapSizes.Small)))
{
    using (var header = modal.BeginHeader())
    {
        <h4 class="modal-title" id="myLargeModalLabel">Small modal</h4>
    }
    using (var body = modal.BeginBody())
    {
        <text>...</text>
    }
}
<!--End Small Modal Templates-->
<!--End Modal Templates-->
@section PageScripts{
    <script src="~/assets/js/bootbox/bootbox.js"></script>
    <script>
        $("#bootbox-regular").on('click', function () {
            bootbox.prompt("What is your name?", function (result) {
                if (result === null) {
                    //Example.show("Prompt dismissed");
                } else {
                    //Example.show("Hi <b>"+result+"</b>");
                }
            });
        });

        $("#bootbox-confirm").on('click', function () {
            bootbox.confirm("Are you sure?", function (result) {
                if (result) {
                    //
                }
            });
        });

        $("#bootbox-options").on('click', function () {
            bootbox.dialog({
                message: $("#myEmailModal").html(),
                title: "New E-Mail",
                className: "modal-darkorange",
                buttons: {
                    success: {
                        label: "Send",
                        className: "btn-blue",
                        callback: function () { }
                    },
                    "Save as Draft": {
                        className: "btn-danger",
                        callback: function () { }
                    }
                }
            });
        });

        $("#bootbox-success").on('click', function () {
            bootbox.dialog({
                message: $("#modal-success").html(),
                title: "Success",
                className: "",
            });
        });
    </script>
}
